<div class="drag_chart_comp">
    <p class="chart_title">网络流入流出速率(bps)</p>
    <div id="chart2" class="chart_item"></div>
</div>
<script>
let data4 = [];
let data5 = [];
let now1 = new Date();

function randomData4() {
  now1 = new Date(now1.getTime() + 1000);
  let value = Math.random() * 20
  return [
    now1,
    Math.round(value + 10)
  ]
}

function randomData5() {
  now1 = new Date(now1.getTime() + 1000);
  let value = Math.random() * 30
  return [
    now1,
    Math.round(value + 20)
  ]
}

let chart2 = echarts.init(document.getElementById('chart2'), 'macarons')
for (let i = 0; i < 50; i++) {
  let a4 = randomData4()
  data4.push(a4);
  let a5 = randomData5()
  data5.push(a5);
}
chart2.setOption({
  legend: {
    x: 180,
    y: 30,
    textStyle: {
      fontSize: 14,
      color: '#fff'
    },
    data: ['流入速率', '流出速率']
  },
  grid: {
    x2: 40,
    borderColor: 'transparent',
  },
  xAxis: [
    {
      type: 'time',
      splitNumber: 4,
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      splitLine: {
        lineStyle: {
          color: '#306192'
        }
      },
      splitArea: {
        show: false,
      }
    }
  ],
  yAxis: {
    type: 'value',
    max: 100,
    min: 0,
    axisLabel: {
      formatter: '{value} %',
      margin: 18,
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: '流入速率',
      type: 'line',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#fdd0c4',
          }
        }
      },
      data: data4
    },
    {
      name: '流出速率',
      type: 'line',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#c89abd',
          }
        }
      },
      data: data5
    },
  ]
})
</script>
